<template>
  <scroll-view scroll-y class="scroll-view">
    <!-- 空购物车 -->
    <view class="cart-blank" v-if="false">
      <image src="/static/images/blank_cart.png" class="image" />
      <text class="text">购物车还是空的，快来挑选好货吧</text>
      <navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
        <button class="button">去首页看看</button>
      </navigator>
    </view>
    <view class="cart-list" v-else>
      <!-- 优惠提示 -->
      <view class="tips">
        <text class="label">满减</text>
        <text class="desc">满1件, 即可享受9折优惠</text>
      </view>
      <!-- 滑动操作分区 -->
      <uni-swipe-action>
        <!-- 滑动操作项 -->
        <uni-swipe-action-item v-for="item in 2" :key="item" class="cart-swipe">
          <!-- 商品信息 -->
          <view class="goods">
            <!-- 选中状态 -->
            <switch :checked="false" color="27ba9b" style="transform: scale(0.6)" />
            <navigator hover-class="none" class="navigator">
              <image
                mode="aspectFill"
                class="picture"
                src="https://yanxuan-item.nosdn.127.net/da7143e0103304f0f3230715003181ee.jpg"
              ></image>
              <view class="meta">
                <view class="name ellipsis">人手必备，儿童轻薄透气防蚊裤73-140cm</view>
                <view class="attrsText ellipsis">黄色小象 140cm</view>
                <view class="price">69.00</view>
              </view>
            </navigator>
            <!-- 商品数量 -->
            <view class="count">
              <text class="text">-</text>
              <input class="input" type="number" value="1" />
              <text class="text">+</text>
            </view>
          </view>
          <!-- 右侧删除按钮 -->
          <template #right>
            <view class="cart-swipe-right">
              <button class="button delete-button">删除</button>
            </view>
          </template>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>

    <!-- 吸底工具栏 -->
    <view class="toolbar">
      <switch :checked="false" color="27ba9b" style="transform: scale(0.6)" />
      <text class="all">全选</text>
      <text class="text">合计:</text>
      <text class="amount">0.00</text>
      <view class="button-grounp">
        <view class="button payment-button"> 去结算(0) </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {}
</script>

<style lang="less">
/* 根元素 */
:host {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f7f7f8;
}
/* 滚动容器 */
.scroll-view {
  flex: 1;
}

/* 空状态 */
.cart-blank {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 60vh;
  .image {
    width: 400rpx;
    height: 281rpx;
  }
  .text {
    color: #444;
    font-size: 26rpx;
    margin: 20rpx 0;
  }
  .button {
    width: 240rpx !important;
    height: 60rpx;
    line-height: 60rpx;
    margin-top: 20rpx;
    font-size: 26rpx;
    border-radius: 60rpx;
    color: #fff;
    background-color: wheat;
  }
}

/* 购物车列表 */
.cart-list {
  padding: 0 20rpx;

  /* 优惠提示 */
  .tips {
    display: flex;
    align-items: center;
    line-height: 1;
    margin: 30rpx 10rpx;
    font-size: 26rpx;
    color: #666;

    .label {
      color: #fff;
      padding: 7rpx 15rpx 5rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
      background-color: #27ba9b;
      margin-right: 10rpx;
    }
  }

  /* 购物车商品 */
  .goods {
    display: flex;
    padding: 20rpx 20rpx 20rpx 80rpx;
    border-radius: 10rpx;
    background-color: #fff;
    position: relative;

    switch {
      margin-left: -90rpx;
    }

    .navigator {
      display: flex;
    }

    .checkbox {
      position: absolute;
      top: 0;
      left: 0;

      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 100%;
    }

    .picture {
      width: 170rpx;
      height: 170rpx;
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20rpx;
    }

    .name {
      height: 72rpx;
      font-size: 26rpx;
      color: #444;
    }

    .attrsText {
      line-height: 1.8;
      padding: 0 15rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .price {
      line-height: 1;
      font-size: 26rpx;
      color: #444;
      margin-bottom: 2rpx;
      color: #cf4444;

      &::before {
        content: '￥';
        font-size: 80%;
      }
    }

    /* 商品数量 */
    .count {
      position: absolute;
      bottom: 20rpx;
      right: 5rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 220rpx;
      height: 48rpx;

      .text {
        height: 100%;
        padding: 0 20rpx;
        font-size: 32rpx;
        color: #444;
      }

      .input {
        height: 100%;
        text-align: center;
        border-radius: 4rpx;
        font-size: 24rpx;
        color: #444;
        background-color: #f6f6f6;
      }
    }
  }

  .cart-swipe {
    display: block;
    margin: 20rpx 0;
  }

  .cart-swipe-right {
    display: flex;
    height: 100%;

    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      padding: 6px;
      line-height: 1.5;
      color: #fff;
      font-size: 26rpx;
      border-radius: 0;
    }

    .delete-button {
      background-color: #cf4444;
    }
  }
}

/* 工具栏 */
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom);
  z-index: 1;

  height: 100rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  background-color: #fff;
  box-sizing: content-box;

  .all {
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
  }

  .text {
    margin-right: 8rpx;
    margin-left: 32rpx;
    color: #444;
    font-size: 14px;
  }

  .amount {
    font-size: 20px;
    color: #cf4444;

    .decimal {
      font-size: 12px;
    }

    &::before {
      content: '￥';
      font-size: 12px;
    }
  }

  .button-grounp {
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 72rpx;
    font-size: 13px;
    color: #fff;

    .button {
      width: 240rpx;
      margin: 0 10rpx;
      border-radius: 72rpx;
    }

    .payment-button {
      background-color: wheat;

      &.disabled {
        opacity: 0.6;
      }
    }
  }
}
</style>
